<template>
  <base-modal
    class="receipt-sn-dialog-container"
    :show.sync="visible"
    :title="title"
    width="500px"
    append-to-body
  >
    <div class="receipt-sn-content">
      <div class="bottom">
        <el-input type="textarea" v-model="isSnValue" :rows="8" :disabled="snValueDisabled"></el-input>
        <div v-if="type === 'readOnly'" class="tips">{{$t('common.form.tip.materialReturn.tips3')}}</div>
        <div v-if="showButton" class="tips">{{$t('common.form.tip.materialReturn.tips4')}}</div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button v-if="showButton" type="primary" @click="submit">{{$t('common.base.submit')}}</el-button>
    </div>
  </base-modal>
</template>
<script>
export default {
  name: 'receipt-sn-dialog',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      type: '',
      title: '',
      titleMap: {
        'add': this.$t('task.detail.components.addSn'),
        'edit': this.$t('task.detail.components.editSn'),
        'readOnly': this.$t('task.detail.components.viewSn')
      },
      snTextList: [],
      isSnValue: '',
      row: {},
      index: ''
    }
  },
  computed: {
    snValue() {
      return this.snTextList.join('\n')
    },
    snValueDisabled() {
      return this.type === 'readOnly'
    },
    showButton() {
      return this.type === 'add' || this.type === 'edit'
    }
  },
  methods: {
    open(type, row, index) {
      this.title = this.titleMap[type]
      this.type = type
      this.row = row
      this.index = index
      this.isSnValue = row?.snList?.join('\n') || ''
      this.visible = true
    },
    submit() {
      let snList = this.isSnValue.split('\n')
      if(snList.length > this.row.num) return this.$platform.toast(this.$t('common.form.tip.materialReturn.tips6'), 'warning')
      
      let data = this.data
      this.$set(data[this.index], 'snList', snList)

      this.$emit('changeSn', data)
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scope>
.receipt-sn-content {
  padding: 10px;
  .bottom {
    padding: 0 4px;
    .tips {
      padding: 10px 0;
      font-size: 12px;
      color: #606266;
    }
  }
  
}
.el-textarea.is-disabled .el-textarea__inner {
  color: #606266 !important;
  background-color: #FFFFFF !important;
}
.base-modal-body {
  padding: 0;
}
</style>